import { Flex, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';

type IProps = {
  pcsViewInfo: any;
  selectColor: (data: any) => void;
};
const PieLegend: React.FC<IProps> = (props) => {
  const { pcsViewInfo, selectColor } = props;
  const [selectedState, setSelecteState] = useState<string[]>([]);
  const intl = useIntl();
  const isEnglish = intl.locale === 'en-US';

  const legendMap = [
    {
      name: intl.formatMessage({ id: 'stationRealtimeMonitoring.standby' }),
      key: 'standby',
      color: 'yellow',
    },
    {
      name: intl.formatMessage({ id: 'stationRealtimeMonitoring.charging' }),
      key: 'charge',
      color: 'green',
    },
    {
      name: intl.formatMessage({ id: 'stationRealtimeMonitoring.discharging' }),
      key: 'discharge',
      color: 'blue',
    },
    {
      name: intl.formatMessage({ id: 'stationRealtimeMonitoring.fault' }),
      key: 'fault',
      color: 'red',
    },
    {
      name: intl.formatMessage({ id: 'stationRealtimeMonitoring.other' }),
      key: 'other',
      color: '#F0F1F5',
    },
  ];
  useEffect(() => {}, pcsViewInfo);
  const onSelectColor = (value: string) => {
    selectColor(value);
    // 控制颜色隐藏显示
    if (!selectedState.length) {
      setSelecteState([value]);
    } else {
      const tempArray = selectedState.includes(value)
        ? selectedState.filter((item) => item !== value)
        : [...selectedState, value];
      setSelecteState(tempArray);
    }
  };
  return (
    <div>
      <Space direction={'vertical'} size={'middle'}>
        {legendMap.map((item) => {
          return (
            <Flex key={item.key}>
              <div
                style={{
                  borderRadius: '50%',
                  backgroundColor: selectedState.includes(item.name) ? '#888' : item.color,
                  height: '14px',
                  width: '14px',
                  lineHeight: '14px',
                  cursor: 'pointer',
                }}
                onClick={() => {
                  onSelectColor(item.name);
                }}
              ></div>
              <div style={{ width: '60px', marginLeft: '20px' }}>{item?.name}</div>
              <div style={{ width: '70px' }}>{pcsViewInfo ? pcsViewInfo[item.key]?.rate : 0}%</div>
              <div>
                {pcsViewInfo ? pcsViewInfo[item.key]?.num : 0}
                {isEnglish ? '' : '台'}
              </div>
            </Flex>
          );
        })}
      </Space>
    </div>
  );
};

export default PieLegend;
